import DieselBg from '@/assets/img/dieselBg.png';
import LightBg from '@/assets/img/lightBg.png';
import LightChargeBg from '@/assets/img/lightChargeBg.png';
import LightDieselBg from '@/assets/img/lightDieselBg.png';
import TotalEnergyBg from '@/assets/img/totalEnergyBg.png';
import WindLightBg from '@/assets/img/windLightBg.png';
import WindLightChargeBg from '@/assets/img/windLightChargeBg.png';
import Card from '@/components/Card';
import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import AreaList from '@/pages/OverView/components/AreaList';
import EventInfo, { IEvent } from '@/pages/OverView/components/EventInfo';
import PowerStatistics from '@/pages/OverView/components/PowerStatistics';
import ProjectView from '@/pages/OverView/photovoltaic/ProjectView';
import SumInfo from '@/pages/OverView/photovoltaic/SumInfo';
import { photovolaticStatusesType } from '@/pages/OverView/photovoltaic/type';
import { formatterValueWithUnit } from '@/utils/formatterUnit';
import { useModel } from '@@/exports';
import { useIntl } from '@umijs/max';
import { Flex, Image, Radio, RadioChangeEvent, Tooltip } from 'antd';
import cls from 'classnames';
import { isNull } from 'lodash';
import React, { useEffect, useState } from 'react';
import { Link } from 'umi';
import Styles from './photovoltaic.less';

type IProps = {
  photovolaticStatuses?: photovolaticStatusesType; // 运行指标
  stationBaseData?: API.StationBaseInfo; // 基本数据
  areaList?: API.StationAreaDTO;
  stationMainData?: API.MainRealtimeData | undefined;
  stationPolicyEvent?: IEvent[];
  stationWarningEvent?: IEvent[];
  stationRealtimeData?: API.StationRealtimeData;
  powerChartInfo?: MyChartOption;
  chargeInfoOptions?: MyChartOption;
  usePowerChartInfo?: MyChartOption;
  useIncomeChartInfo?: MyChartOption;
  changeIncomeType: (data: any) => void;
  getChargeInfo: (data: any) => void;
};
const energyBgMap = new Map([
  ['diesel', DieselBg], // 柴油
  ['wind_light', WindLightBg], //风光储
  ['wind_light_charge', WindLightChargeBg], // 风光储充
  ['total', TotalEnergyBg], // 风光储充柴一体
  ['light_diesel', LightDieselBg], // 光储柴
  ['light', LightBg], // 光储一体
  ['light_charge', LightChargeBg],
  [null, TotalEnergyBg],
  [undefined, TotalEnergyBg],
]);
const StationOverView: React.FC<IProps> = (props) => {
  const { initialState } = useModel('@@initialState');
  const [hasChargeTower, setHasChargeTower] = useState(false); // 判断充电桩
  // const [hasWindPower, setHasWindPower] = useState(false); // 判断风力发电
  // const [hasOilPower, setHasOilPower] = useState(false); // 判断柴油
  const [batteryEventelected, setBatteryEventSelected] = useState('baseEvent');
  const intl = useIntl();
  // 能源组成类型
  const [energyType, setEnergyType] = useState<null | string>(null);
  useEffect(() => {
    console.log('energyType', energyType);
  }, [energyType]);

  const {
    photovolaticStatuses,
    stationBaseData,
    areaList,
    stationMainData,
    stationPolicyEvent,
    stationWarningEvent,
    stationRealtimeData,
    powerChartInfo,
    chargeInfoOptions,
    usePowerChartInfo,
    useIncomeChartInfo,
    changeIncomeType,
    getChargeInfo,
  } = props;
  const [bgType, setBgType] = useState(TotalEnergyBg);
  const handleChangeEvent = (e: RadioChangeEvent) => {
    setBatteryEventSelected(e.target.value);
  };
  const linkTo = batteryEventelected === 'baseEvent' ? '/strategy/track?tab=3' : '/alarm/list';

  /**
   * 获得能源组成类型
   * @param complex
   */
  const getEnergyType = (complex: API.EnergyComplex): string | null | undefined => {
    if (complex) {
      // 判断光伏发电
      const hasPhotovoltaic = !isNull(complex?.photovoltaicCapacity);
      // 判断充电桩
      const hasCharge = !isNull(complex?.chargingPointCapacity);
      setHasChargeTower(hasCharge);
      //   判断风电装机
      const hasWind = !isNull(complex?.windPowerCapacity);
      // setHasWindPower(hasWind);
      // 判断柴油发电
      const hasDiesel = !isNull(complex?.oilPowerCapacity);
      // setHasOilPower(hasDiesel);
      if (!hasPhotovoltaic && !hasCharge && !hasWind && hasDiesel) {
        // 柴储
        return 'diesel';
      } else if (hasPhotovoltaic && !hasCharge && hasWind && !hasDiesel) {
        // 风光储
        return 'wind_light';
      } else if (hasPhotovoltaic && hasCharge && hasWind && !hasDiesel) {
        //风光储充
        return 'wind_light_charge';
      } else if (hasPhotovoltaic && hasCharge && hasWind && hasDiesel) {
        // 风光储充柴
        return 'total';
      } else if (hasPhotovoltaic && !hasCharge && !hasWind && hasDiesel) {
        // 光储柴
        return 'light_diesel';
      } else if (hasPhotovoltaic && !hasCharge && !hasWind && !hasDiesel) {
        // 光储一体
        return 'light';
      } else if (hasPhotovoltaic && hasCharge && !hasWind && !hasDiesel) {
        // 光储充
        return 'light_charge';
      } else {
        return null;
      }
    }
  };
  // 策略事件
  const BaseEventPanel = () => {
    return <EventInfo eventData={stationPolicyEvent} columnWidths={['50px', '150px', '60px']} />;
  };

  // 警告事件
  const WarningEventPanel = () => {
    const isScrolling = stationWarningEvent.length > 4;
    return (
      <EventInfo
        eventData={stationWarningEvent}
        eventType="warning"
        isScrolling={isScrolling}
        columnWidths={['50px', '80px', '200px']}
      />
    );
  };
  const getPhotovoIncomeInfo = (values) => {
    getChargeInfo(values);
  };

  useEffect(() => {
    setEnergyType(getEnergyType(stationBaseData?.energyComplex));
    setBgType(energyBgMap.get(getEnergyType(stationBaseData?.energyComplex)));
  }, [stationBaseData]);
  return (
    <div className={Styles.view}>
      <div className={Styles.viewLeft}>
        <div className={cls([Styles.viewBox, Styles.stationInfo])}>
          <SumInfo photovolaticStatuses={photovolaticStatuses}></SumInfo>
        </div>
        <div className={Styles.viewLeftBottom}>
          <div className={cls([Styles.viewBox, Styles.leftChart])}>
            <Card
              title={`${intl.formatMessage({ id: 'photovoltaic.static' })}${
                initialState?.areaInfo?.areaName ? '_' + initialState?.areaInfo?.areaName : ''
              }`}
            >
              <div style={{ height: '100%' }}>
                <EchartsComponent option={powerChartInfo} height={'15rem'} />
              </div>
            </Card>
          </div>
          <div className={cls([Styles.viewBox, Styles.leftChart])}>
            <Card
              styles={{
                header: {
                  maxWidth: '18rem',
                  whiteSpace: 'nowrap' /* 不换行 */,
                  textAlign: 'center',
                  textOverflow: 'ellipsis',
                },
              }}
              title={
                <div>
                  <Tooltip
                    title={`${intl.formatMessage({ id: 'photovoltaic.capacity' })}${
                      initialState?.areaInfo?.areaName ? '_' + initialState?.areaInfo?.areaName : ''
                    }`}
                  >
                    {`${intl.formatMessage({ id: 'photovoltaic.capacity' })}${
                      initialState?.areaInfo?.areaName ? '_' + initialState?.areaInfo?.areaName : ''
                    }`}
                  </Tooltip>
                </div>
              }
            >
              <PowerStatistics
                chargeInfoOptions={chargeInfoOptions}
                sendChargeInfo={getPhotovoIncomeInfo}
              />
            </Card>
          </div>
        </div>
      </div>
      <div className={Styles.viewRight}>
        <div className={cls([Styles.viewBox, Styles.viewRightBox])}>
          <Card
            title={`${intl.formatMessage({ id: 'photovoltaic.genConPower' })}${
              initialState?.areaInfo?.areaName ? '_' + initialState?.areaInfo?.areaName : ''
            }`}
          >
            <EchartsComponent option={usePowerChartInfo} height={'13rem'} />
          </Card>
        </div>
        <div className={cls([Styles.viewBox, Styles.viewRightBox])}>
          <Card
            title={`${intl.formatMessage({ id: 'photovoltaic.genConEnergy' })}${
              initialState?.areaInfo?.areaName ? '_' + initialState?.areaInfo?.areaName : ''
            }`}
            style={{ position: 'relative', padding: 0 }}
          >
            <div style={{ position: 'absolute', right: 50, zIndex: 20 }}>
              <Radio.Group
                buttonStyle="solid"
                size={'small'}
                defaultValue={'month'}
                onChange={(e) => {
                  changeIncomeType(e.target.value);
                }}
              >
                <Radio.Button value={'month'}>
                  {intl.formatMessage({ id: 'photovoltaic.month' })}
                </Radio.Button>
                <Radio.Button value={'year'}>
                  {intl.formatMessage({ id: 'photovoltaic.year' })}
                </Radio.Button>
              </Radio.Group>
            </div>
            <EchartsComponent option={useIncomeChartInfo} height={'13rem'} />
          </Card>
        </div>
        <div className={cls([Styles.viewBox, Styles.viewRightBox, Styles.alarmArea])}>
          <Card
            className={Styles.OpacityCard}
            title={`${intl.formatMessage({ id: 'overviewPages.latestEvents' })}${
              initialState?.areaInfo?.areaName ? '_' + initialState?.areaInfo?.areaName : ''
            }`}
            extra={
              <Flex align="center">
                <Radio.Group
                  defaultValue="baseEvent"
                  buttonStyle="solid"
                  onChange={handleChangeEvent}
                  value={batteryEventelected}
                  size="small"
                >
                  <Radio.Button value="baseEvent">
                    {intl.formatMessage({ id: 'overviewPages.policyEvents' })}
                  </Radio.Button>
                  <Radio.Button value="warningEvent">
                    {intl.formatMessage({ id: 'overviewPages.alarmEvents' })}
                  </Radio.Button>
                </Radio.Group>
                <Link to={linkTo}>
                  <div
                    className={Styles.DetailText}
                    style={{ marginLeft: '10px', cursor: 'pointer' }}
                  >
                    <span>{intl.formatMessage({ id: 'global.detail' })}</span>
                    <span>{'>'}</span>
                  </div>
                </Link>
              </Flex>
            }
          >
            {batteryEventelected === 'baseEvent' ? <BaseEventPanel /> : <WarningEventPanel />}
          </Card>
        </div>
      </div>
      {/*概览图模块*/}
      <div className={cls([Styles.hoverItem, Styles.hoverGCP])}>
        <div className={Styles.hoverItemTitle}>
          {intl.formatMessage({ id: 'photovoltaic.PoC' })}
        </div>
        <div className={Styles.hoverItemText}>
          {formatterValueWithUnit(stationMainData?.pocPower, 'kW')}
        </div>
      </div>
      {/*风力发电*/}
      {/*{hasWindPower && (*/}
      {/*  <div className={cls([Styles.hoverItem, Styles.hoverWind])}>*/}
      {/*    <div className={Styles.hoverItemTitle}>*/}
      {/*      {intl.formatMessage({ id: 'siteManage.windPower' }) +*/}
      {/*        intl.formatMessage({ id: 'photovoltaic.realtimePower' })}*/}
      {/*    </div>*/}
      {/*    <div className={Styles.hoverItemText}>*/}
      {/*      {formatterValueWithUnit(stationMainData?.chargingPointPower, 'kW')}*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*)}*/}
      {/*柴油发电*/}
      {/*{hasOilPower && (*/}
      {/*  <div className={cls([Styles.hoverItem, Styles.hoverDiesel])}>*/}
      {/*    <div className={Styles.hoverItemTitle}>*/}
      {/*      {intl.formatMessage({ id: 'siteManage.dieselPower' }) +*/}
      {/*        intl.formatMessage({ id: 'photovoltaic.realtimePower' })}*/}
      {/*    </div>*/}
      {/*    <div className={Styles.hoverItemText}>*/}
      {/*      {formatterValueWithUnit(stationMainData?.chargingPointPower, 'kW')}*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*)}*/}
      {/*充电桩*/}
      {hasChargeTower && (
        <div className={cls([Styles.hoverItem, Styles.hoverPile])}>
          <div className={Styles.hoverItemTitle}>
            {intl.formatMessage({ id: 'global.chargingPile' }) +
              intl.formatMessage({ id: 'photovoltaic.realtimePower' })}
          </div>
          <div className={Styles.hoverItemText}>
            {formatterValueWithUnit(stationMainData?.chargingPointPower, 'kW')}
          </div>
        </div>
      )}
      {/*储能电箱*/}
      <div className={Styles.hoverBox}>
        <div className={Styles.hoverBoxItem}>
          <span>{intl.formatMessage({ id: 'photovoltaic.realtimePower' })}</span>
          <span>{formatterValueWithUnit(stationMainData?.totalPower, 'kW')}</span>
        </div>
        <div className={Styles.hoverBoxItem}>
          <span>{intl.formatMessage({ id: 'photovoltaic.chargeCap' })}</span>
          <span>{formatterValueWithUnit(stationRealtimeData?.chargableEnergy, 'kWh')}</span>
        </div>
        <div className={Styles.hoverBoxItem}>
          <span>{intl.formatMessage({ id: 'photovoltaic.dischargeCap' })}</span>
          <span>{formatterValueWithUnit(stationRealtimeData?.dischargableEnergy, 'kWh')}</span>
        </div>
      </div>
      <div className={cls([Styles.viewBox, Styles.stationView])}>
        <Card title={intl.formatMessage({ id: 'photovoltaic.overview' })}>
          <ProjectView stationBaseData={stationBaseData} />
        </Card>
      </div>
      <div className={Styles.bg}>
        <Image src={bgType} preview={false}></Image>
      </div>
      <div className={Styles.areaBox}>
        <AreaList areaList={areaList}></AreaList>
      </div>
    </div>
  );
};
export default StationOverView;
